<template>
  <div class="SearchA">
    <ul>
      <li v-for="(v,i) in AlbumList" :key="i">
        <div class="SearchA_a"><router-link :to="`/albuminfo/${v.id}`"><img :src="v.picUrl"></router-link></div>
        <div class="SearchA_b"><router-link :to="`/albuminfo/${v.id}`">{{v.name}}</router-link></div>
        <div class="SearchA_c"><span v-for="(q,w) in v.artists" :key="w"><span v-if="w>0">&nbsp;/&nbsp;</span><router-link :to="`/singerInfo/${q.id}`">{{q.name}}</router-link></span></div>
      </li>
    </ul>      
  </div>
</template>
<script>
import axios from "axios";
export default {
    data () {
        return {
            keyword:"",
            type:"",
            AlbumList:{},
        }
    },
     methods: {
    //   获取专辑数据
    getData() {
      axios
        .get(
          `http://127.0.0.1:3000/cloudsearch?keywords=${this.keyword}&type=${this.type}`
        )
        .then((res) => {
          this.AlbumList = res.data.result.albums
        });
    },
  },
  created() {
    this.keyword = this.$route.params.value;
    this.type = this.$router.history.current.name;
    this.getData()
  },
};
</script>
<style scoped>
.SearchA>ul{
  display: flex;
  flex-wrap: wrap;
}
.SearchA>ul>li{
  width: 153px;
  margin-left: 33.25px;
  padding-bottom: 30px;
}
.SearchA>ul>li:nth-child(1){
  margin-left: 0px;
}
.SearchA>ul>li:nth-child(5n+1){
  margin-left: 0px;
}
.SearchA>ul>li>.SearchA_a{
  width: 153px;
  height: 130px;
  background: url("../../../public/images/coverall.png") no-repeat 0px -845px ;
}
.SearchA>ul>li>.SearchA_a>a>img{
  width: 130px;
  height: 130px;
}
.SearchA>ul>li>.SearchA_b{
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.SearchA>ul>li>.SearchA_b>a{
  font-size: 12px;
}
.SearchA>ul>li>.SearchA_b>a:hover{
  text-decoration: underline;
}
.SearchA>ul>li>.SearchA_c{
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.SearchA>ul>li>.SearchA_c>span>a{
  font-size: 12px;
}
.SearchA>ul>li>.SearchA_c>span>a:hover{
  text-decoration: underline;
}
.SearchA>ul>li>.SearchA_c>span>span{
  font-size: 1px;
}
</style>